<template>
  <el-descriptions
    class="margin-top"
    direction="vertical"
    title=""
    :column="col"
    size="default"
    border
  >
    <el-descriptions-item
      v-for="(dayItem, index) in props.data.intervalDayList"
      :key="index"
    >
      <template #label>
        <div class="cell-item">{{ dayItem.date }}</div>
      </template>
      <div
        :style="{
          backgroundColor:
            quantity && quantity != props.data.stoveData[index]
              ? '#fef1f1'
              : '',
          textAlign: 'center',
        }"
      >
        {{ props.data.stoveData[index] }}
      </div>
    </el-descriptions-item>
    <el-descriptions-item v-if="props.data.intervalDayList?.length % col !== 0">
      <template #label>
        <div class="cell-item"></div>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
defineOptions({
  name: "MESBATCHNUMBERRULEDESCRIPTIONS",
  inheritAttrs: false,
});

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  suffix: {
    type: String,
    default: () => {
      return "";
    },
  },
  column: {
    type: Number,
    default: () => {
      return null;
    },
  },
  start: {
    type: Number,
    default: () => {
      return 1;
    },
  },
});
const quantity = ref();
watch(
  () => props.data.quantity,
  (newVal: number) => {
    quantity.value = newVal;
    console.log("props.data.quantity", props.data.quantity);
  }
);
const col = computed(() => props.column ?? props.data.intervalDayList?.length);
</script>

<style lang="scss" scoped>
.cell-item {
  text-align: center;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}
</style>
